<template>
     <!-- 页头 -->
     <el-page-header :icon="ArrowLeft" title="返回" @back="goBack">
          <template #content>
            <span class="text-large font-600 mr-3"> {{pageTitle}} </span>
          </template>
        </el-page-header>
  <!-- 用户-全部任务 -->
   <!-- 用户-搜索表单主体 -->
  <el-form id="user-all-task-from-content" ref="formEl" :inline="true" :model="formInline" class="demo-form-inline">
<!-- 用户-搜索表单输入框父级  -->
    <div id="user-all-task-from-item-input-content-parent" class="">
      <!-- 用户-搜索任务名称子项父级  -->
      <el-form-item id="user-all-task-from-item-input-task-name-parent" label="任务名称" prop="title">
         <!-- 用户-搜索任务名称输入框  -->
        <el-input id="user-all-task-from-input-task-name" v-model="formInline.title" placeholder="任务名称" clearable />
      </el-form-item>
          <!-- 用户-搜索任务内容子项父级  -->
      <el-form-item id="user-all-task-from-item-input-task-content-parent" label="任务内容" prop="content">
               <!-- 用户-搜索任务内容输入框  -->
        <el-input id="user-all-task-from-input-task-content" v-model="formInline.content" placeholder="任务内容" clearable />
      </el-form-item>
                <!-- 用户-选择任务类型子项父级  -->
      <el-form-item id="user-all-task-from-item-select-task-type-parent" label="任务类型" prop="taskType" >
           <!-- 用户-选择任务类型下拉框父级  -->
        <el-select id="user-all-task-from-select-task-type" v-model="formInline.taskType" placeholder="任务类型" clearable>
          <!-- 用户-选择任务类型下拉框 自主创建选项  -->
          <el-option id="user-all-task-from-select-task-type-0" label="自主创建" value="自主创建" />
           <!-- 用户-选择任务类型下拉框 被指派选项  -->
          <el-option  id="user-all-task-from-select-task-type-1" label="被指派" value="被指派" />
        </el-select>
      </el-form-item> 
              <!-- 用户-选择任务状态子项父级  -->
      <el-form-item id="user-all-task-from-item-select-task-status-parent" label="任务状态" prop="taskStatus">
                         <!-- 用户-选择任务类型下拉框父级  -->
        <el-select id="user-all-task-from-select-task-status"  clearable v-model="formInline.taskStatus" placeholder="任务状态">
          <!-- 用户-选择任务状态下拉框 进行中（代办）选项  -->
          <el-option id="user-all-task-from-select-task-status-0" label="进行中（待办）" value="进行中（待办）" />
           <!-- 用户-选择任务状态下拉框 已完成（已办）选项  -->
          <el-option  id="user-all-task-from-select-task-status-1" label="已完成（已办）" value="已完成（已办）" />
         <!-- 用户-选择任务状态下拉框 已到期（未完成）选项  -->
         <el-option  id="user-all-task-from-select-task-status-1" label="已到期（未完成）" value="已到期（未完成）" />
        </el-select>
      </el-form-item>
          <!-- 用户-选择任务截止时间子项父级  -->
      <el-form-item id="user-all-task-from-item-select-task-date-parent" label="截止时间" prop="taskDates">
             <!-- 用户-选择任务截至时间组件主体  -->
        <el-date-picker id="user-all-task-from-item-select-task-date-content"  v-model="formInline.taskDates" type="datetimerange" range-separator="至"
          format="YYYY-MM-DD HH:mm:ss" value-format="x" start-placeholder="开始时间" end-placeholder="结束时间" />
      </el-form-item>
    </div>
        <!-- 用户-查询按钮 重置按钮 新建任务按钮 导出按钮 父级 -->
    <div class="" id="user-all-task-from-item-btn-content-parent">
      <!-- 用户-查询按钮表单子项父级-->
      <el-form-item id="user-all-task-from-item-search-btn-parent">
              <!-- 用户-查询按钮-->
        <el-button id="user-all-task-from-item-search-btn" type="primary" :disabled="userAllTaskStore.searchButtonDisabdled"
          @click="searchAllTask">查询</el-button>
      </el-form-item>
       <!-- 用户-重置按钮表单子项父级-->
      <el-form-item id="user-all-task-from-item-reset-btn-parent">
                   <!-- 用户-重置按钮-->
        <el-button id="user-all-task-from-item-reset-btn" type="default" :disabled="userAllTaskStore.resetButtonDisabdled"
          @click="resetClick(formEl)">重置</el-button>
      </el-form-item>
       <!-- 用户-新建任务，导出按钮表单子项父级-->
      <el-form-item  id="user-all-task-from-item-create-export-btn-parent">
                    <!-- 用户-新建任务按钮-->
        <el-button id="user-all-task-from-item-create-btn" type="primary" :icon="Plus" @click="newTask">新建任务</el-button>
                       <!-- 用户-导出按钮-->
        <el-button id="user-all-task-from-item-export-btn" type="default" :disabled="userAllTaskStore.exportButtonDisabdled" :icon="Promotion"
          @click="myExportTables">导出</el-button>
      </el-form-item>
    </div>
  </el-form>

<!-- 全部任务表格数据显示主体父级 -->
  <div style="height: 500px" id="user-all-task-table-content-parent">
    <!-- 表格的大小兼容父级组件 -->

    <el-auto-resizer id="user-all-task-table-auto-resizer-content-parent">
      <!--  全部任务的默认插槽父级-->
      <template id="user-all-task-table-slot-default-content-parent" #default="{ height, width }">
        <!-- 虚拟列表主体 -->
        
        <el-table-v2 id="user-all-task-table-v2-contet" :columns="getColumns(router, userAllTaskStore)" :data="userAllTaskStore.userWorksList"
          :width="width" :height="height" fixed>
              <!-- 虚拟列表的覆盖内容主体父级 -->
          <template id="user-all-task-table-v2-contet-slot-overlay-content-parent" #overlay v-if="userAllTaskStore.showMask">
           <!-- 虚拟列表的覆盖内容遮罩主体 -->
            <div id="user-all-task-table-v2-contet-slot-overlay-content-loading-mask-content" class="el-loading-mask" style="display: flex; align-items: center; justify-content: center">
              <!-- 遮罩主体内的图标父级 -->
              <el-icon id="user-all-task-table-v2-contet-slot-overlay-content-icon" class="is-loading" color="var(--el-color-primary)" :size="26">
                   <!-- 遮罩主体内的加载图标 -->
                <Loading id="user-all-task-table-v2-contet-slot-overlay-content-icon-loading" />
              </el-icon>
            </div>
          </template>
        </el-table-v2>
      </template>
    </el-auto-resizer>
  </div>

<!-- 分页选择容器父级 -->
  <el-pagination id="user-all-task-pagination-content" v-model:current-page="userAllTaskStore.currentPage" v-model:page-size="userAllTaskStore.pageSize"
    :page-sizes="[10, 20, 30, 40]" :size="size" :disabled="userAllTaskStore.pageButtonDisabdled"
    :background="background" layout="sizes, prev, pager, next"
    :total="Object.prototype.toString.call(userAllTaskStore.userWorksListCopy) === '[object Array]' ? userAllTaskStore.userWorksListCopy.length : 0"
    class="taskManagement-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
<script setup>

import { reactive, h, ref, unref, onMounted, computed, toRef,onUnmounted } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { storeToRefs } from 'pinia';
import { ElCheckbox, ElMessageBox, ElMessage } from 'element-plus'
import { Plus, Promotion } from '@element-plus/icons-vue'
import { useAllTaskStore } from "@/store/userAllTask"
import { getColumns } from "../../store/userAllTask/js/column.js"

import {
  ElButton,
  ElIcon,
  ElTag,
  ElTooltip,
  TableV2FixedDir,

} from 'element-plus'
import { Loading ,ArrowLeft} from '@element-plus/icons-vue'
import * as XLSX from 'xlsx'
/*
{
          userId: 用户id（选填）
          title:任务名称（选填）
          content:任务内容（选填）
          createTime:创建时间，传时间戳（选填）
          endTime:截止时间，传时间戳（选填）
          }
          */
      
const route = useRoute()
let pageTitle = ref()
if(Object.prototype.hasOwnProperty.call(route.query,"title")){
  pageTitle=route.query.title
}else{
  pageTitle=route.meta.title
}

const userAllTaskStore = useAllTaskStore()
let { formInline } = storeToRefs(userAllTaskStore)
const router = useRouter()

onMounted(()=>{
  userAllTaskStore.searchTask()
  userAllTaskStore.formInline.content=""
  userAllTaskStore.formInline.taskType=""
  userAllTaskStore.formInline.taskStatus=""
    userAllTaskStore.formInline.taskDates=[]
})

const formEl = ref(null)

const size = ref('default')
const disabled = ref(false)
const background = ref(false)
// 获取全部的任务
const searchAllTask = () => {
  let { title,
    content,
    taskType,
    taskStatus,
    taskDates,
  } = formInline.value
  

  userAllTaskStore.searchTask()
}
// 页数改变 获取分页数据
const handleCurrentChange = (val) => {
  userAllTaskStore.showMask = true//显示遮罩
  userAllTaskStore.searchButtonDisabdled = true//禁用查询
  userAllTaskStore.resetButtonDisabdled = true//禁用重置
  userAllTaskStore.exportButtonDisabdled = true//禁用导出
  userAllTaskStore.pageButtonDisabdled = true//禁用分页
  let obj = userAllTaskStore.pageNuber
  userAllTaskStore.userWorksList = userAllTaskStore.userWorksListCopy.slice(obj.pageStart, obj.pageStart + obj.pageEnd)

  setTimeout(() => {
    userAllTaskStore.showMask = false//取消显示遮罩
    userAllTaskStore.searchButtonDisabdled = false//取消禁用查询
    userAllTaskStore.resetButtonDisabdled = false//取消禁用重置
    userAllTaskStore.exportButtonDisabdled = false//取消禁用导出
    userAllTaskStore.pageButtonDisabdled = false//取消禁用分页
  }, 1100)
}
// 页面的数据大小改变 获取分页数据
const handleSizeChange = (val) => {
  // 直接调用
  handleCurrentChange()
}


//导出任务
const myExportTables = () => {
  if (userAllTaskStore.userWorksList.length != 0) {
    userAllTaskStore.showMask = true//显示遮罩
    userAllTaskStore.searchButtonDisabdled = true//禁用查询
    userAllTaskStore.resetButtonDisabdled = true//禁用重置
    userAllTaskStore.exportButtonDisabdled = true//禁用导出
    userAllTaskStore.pageButtonDisabdled = true//禁用分页

    // 将数据转换为工作表
    const worksheet = XLSX.utils.json_to_sheet(userAllTaskStore.userWorksList);

    // 创建一个新的工作簿并将工作表添加到其中
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

    // 生成 Excel 文件并触发下载
    XLSX.writeFile(workbook, userAllTaskStore.userWorksList[0].title + '.xlsx');

    setTimeout(() => {
      userAllTaskStore.showMask = false//取消显示遮罩
      userAllTaskStore.searchButtonDisabdled = false//取消禁用查询
      userAllTaskStore.resetButtonDisabdled = false//取消禁用重置
      userAllTaskStore.exportButtonDisabdled = false//取消禁用导出
      userAllTaskStore.pageButtonDisabdled = false//取消禁用分页
    }, 1100)
  } else {
    ElMessage.error('任务为空，没有数据导出')
  }

}


setTimeout(() => {
  userAllTaskStore.showMask = false//取消显示遮罩
  userAllTaskStore.searchButtonDisabdled = false//取消禁用查询
  userAllTaskStore.resetButtonDisabdled = false//取消禁用重置
  userAllTaskStore.exportButtonDisabdled = false//取消禁用导出
  userAllTaskStore.pageButtonDisabdled = false//取消禁用分页
}, 1100)

// 返回上一页
const goBack=()=>{
  router.go(-1)
}
// 新建任务
const newTask = () => {
  router.push({ path: "/newTask" })
}
// 重置

const resetClick = (formEl) => {


  if (!formEl) return
  formEl.resetFields()

  // 清空所有的条件，获取全部任务
  userAllTaskStore.searchTask()

}





</script>
<style lang="less" scoped>
@media (min-width: 992px) {
  .demo-form-inline {
    display: flex;
  }
  #user-all-task-table-content-parent{
    height: 470px !important;
  }
}

@media (max-width: 992px) {

  #user-all-task-table-content-parent{
    height: 400px !important;
  }
}

@media (max-width: 992px) {
  .demo-form-inline {
    display: flex;
    flex-direction: column;
  }
}


.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.taskManagement-pagination {
  margin-top: 10px;
  justify-content: flex-end
}

/deep/ .tagStatus {
  padding: 0;
  width: 12px !important;
  height: 12px !important;
  margin-right: 10px;
}

.is-hidden-mask {
  display: none;
}
</style>